<template>
  <div>
    <div class="box">
      <!-- 筛选查询 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/搜索小.png"
            alt=""
          />
        </div>
        <div>
          筛选查询
        </div>
      </div>
      <div class="search">
        <div class="search">
          <div class="whead">
            <div class="left">订单编号 :</div>
            <el-input
              v-model="input"
              @change="btnchange(input)"
              style="width: 240px;"
              placeholder="订单编号"
            >
            </el-input>
          </div>
          <div class="whead">
            <div class="left">用户手机号 :</div>
            <el-input
              v-model="phone"
              @change="phoneChange(phone)"
              style="width: 240px;"
              placeholder="用户手机号"
            >
            </el-input>
          </div>
          <div class="whead">
            <div class="left">订单状态 :</div>
            <el-select
              v-model="staty"
              placeholder="全部"
              @change="statusChange(staty)"
            >
              <el-option
                v-for="item in statu"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="whead">
            <div class="left">发票状态 :</div>
            <el-select
              v-model="invoicInfo"
              placeholder="全部"
              @change="invoicChange(invoicInfo)"
            >
              <el-option
                v-for="item in invoic"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="whead">
            <div class="left">提交日期 :</div>
            <el-date-picker
              v-model="timeInfo"
              @change="timeChange(timeInfo)"
              style="width: 240px;"
              prefix-icon="el-icon-time"
              type="daterange"
              range-separator="至"
              start-placeholder="申请时间"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
        </div>

        <div style="display: flex; height: 40px;">
          <el-button type="primary" @click="btnSearch">搜索</el-button>
          <el-button
            v-permission="['fishPartyOrder:info:add']"
            type="primary"
            @click="addOrder"
            >添加订单</el-button
          >
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="lists">
        <div class="list">
          <div>
            <img
              class="list-img"
              src="../../../assets/images/查询数据列表.png"
              alt=""
            />
          </div>
          <div>
            数据列表
          </div>
        </div>
        <div style="margin-right: 20px;">
          <el-button v-on:click="exportBtn()"  type="primary" size="small " class="el-icon-upload">导出数据</el-button>
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table border :data="listData" style="width: 100%" align="center">
          <el-table-column
            prop="orderNo"
            label="订单编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="下单时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="userId"
            label="用户ID"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="totalPrice"
            label="订单金额"
            align="center"
          ></el-table-column>
          <el-table-column label="支付方式" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.paymentMode == 'wechatpay'">
                微信支付
              </div>
              <div v-if="scope.row.paymentMode == 'alipay'">
                支付宝
              </div>
              <div v-if="scope.row.paymentMode == 'bytedancepay'">
                字节跳动
              </div>
              <div v-if="scope.row.paymentMode == 'offlinePay'">
                线下支付
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单来源" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.sourceType == 'wxmini'">
                微信小程序
              </div>
              <div v-if="scope.row.sourceType == 'dymini'">
                抖音小程序
              </div>
              <div v-if="scope.row.sourceType == 'web'">
                H5
              </div>
              <div v-if="scope.row.sourceType == 'android'">
                安卓
              </div>
              <div v-if="scope.row.sourceType == 'ios'">
                苹果
              </div>
              <div v-if="scope.row.sourceType == 'wxweb'">
                微信浏览器
              </div>
              <div v-if="scope.row.sourceType == 'pc'">
                后台录单
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.orderStatus == 1">
                待支付
              </div>
              <div v-if="scope.row.orderStatus == 2">
                已完成
              </div>
              <div v-if="scope.row.orderStatus == 3">
                已失效
              </div>
              <div v-if="scope.row.orderStatus == 4">
                已关闭
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发票状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.invoiceStatus == 1">
                未申请
              </div>
              <div v-if="scope.row.invoiceStatus == 2">
                开票中
              </div>
              <div v-if="scope.row.invoiceStatus == 3">
                已完成
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row.id)"
                type="primary"
                size="small"
                >查看</el-button
              >
              <!-- <el-button v-permission="['ishPartyOrder:info:edit']"  @click="handleClick(scope.row.id)" type="primary" size="small">编辑</el-button>
                            <el-button v-permission="['fishPartyOrder:info:close']"  @click="handleClick(scope.row.id)" type="primary" size="small">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import CommonTable from "@/components/Table/index.vue";
import {
  editFishPartyOrder,
  closeOrder,
  exportFishPartyOrderExcel
} from "@/api/user";
export default {
  data() {
    return {
      input: "", //搜索
      phone: "", //手机号搜索
      timeInfo: "", //日期选择
      staty: "", //工单状态
      invoicInfo: "", //发票状态
      loading: false,
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: 1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      listData: [],
      invoiceStatus: 0, //发票状态：0.全部 1.未申请 2.开票中 3.已完成
      orderNo: "", //订单编号
      orderStatus: 0, //订单状态 0.全部 1.待支付 2.已完成 3.已失效 4.已关闭
      orderBeginDate: "", //订单申请时间
      orderEndDate: "", //订单结束时间
      userId: 0, //用户ID
      phoneNumber: "", //用户手机号
      statu: [
        {
          value: 1,
          label: "待支付"
        },
        {
          value: 2,
          label: "已完成"
        },
        {
          value: 3,
          label: "已失效"
        },
        {
          value: 4,
          label: "已关闭"
        }
      ],
      invoic: [
        {
          value: 1,
          label: "未申请"
        },
        {
          value: 2,
          label: "开票中"
        },
        {
          value: 3,
          label: "已完成"
        }
      ]
    };
  },
  created() {
    this.editFishPartyOrder(this.pageSize, this.currentPage);
  },
  methods: {
    // 导出数据
    async exportBtn() {
      let data = {
        limit: this.pageSize,
        page: this.currentPage,
        invoiceStatus: this.invoiceStatus,
        orderNo: this.orderNo,
        orderStatus: this.orderStatus,
        orderBeginDate: this.orderBeginDate,
        orderEndDate: this.orderEndDate,
        phoneNumber: this.phoneNumber,
        userId: this.userId
      };
      let result = await exportFishPartyOrderExcel(data);
      if (result.code == 0) {
        // 下载文件
        window.location.href = process.env.VUE_APP_BASE_API + "/file/export/exportInfo?fileName=" + result.data;
      }
    },

    async editFishPartyOrder(limit, page) {
      let data = {
        limit: this.pageSize,
        page: this.currentPage,
        invoiceStatus: this.invoiceStatus,
        orderNo: this.orderNo,
        orderStatus: this.orderStatus,
        orderBeginDate: this.orderBeginDate,
        orderEndDate: this.orderEndDate,
        phoneNumber: this.phoneNumber,
        userId: this.userId
      };
      let result = await editFishPartyOrder(data);
      if (result.code == 0) {
        this.listData = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
      }
      this.listData.forEach(element => {
        if (element.agentLevel == 2) {
          element.agentLevel = "省级代理";
        } else {
          element.agentLevel = "市级代理";
        }
      });
    },
    // 查看
    handleClick(e) {
      this.$router.push({ path: "/orderEdit", query: { e } });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    //  搜索用户ID
    btnchange(e) {
      this.orderNo = e;
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    //手机号输入框数据
    phoneChange(e) {
      this.phoneNumber = e;
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    // 时间选择
    timeChange(e) {
      if (e) {
        this.orderBeginDate = e[0];
        this.orderEndDate = e[1];
      } else {
        this.orderBeginDate = "";
        this.orderEndDate = "";
      }
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    // 工单状态搜索
    statusChange(e) {
      this.orderStatus = e;
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    // 发票状态搜索
    invoicChange(e) {
      this.invoiceStatus = e;
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    // 搜索
    btnSearch(e) {
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    //关闭订单
    async closeClick(e) {
      this.$confirm("确定关闭该订单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let result = await closeOrder(data);
          if (result.code == 0) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.$router.go(0);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

      let data = {
        orderId: e
      };
    },
    //添加订单
    addOrder() {
      this.$router.push("addOrder");
    }
  }
};
</script>

<style lang="scss" scoped>
.left {
  margin-right: 10px;
}
.lists {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;
}

.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  display: flex;
  align-items: center;
  height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}
</style>
